웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
jquery 또는 자바스크립트를 사용해 마우스가 특정 엘리먼트에 들어왔을때 이벤트를 발생하게 하는 방법에 대하여 알아보고자 합니다. 우선 아래와 같이 두 가지 방법이 존재합니다.
#1 마우스오버(마우스엔터), 마우스 올렸을때
.mouseenter()
// mouseover() 메소드를 사용한 방법
.on('mouseenter', function();)
// mouseover 이벤트를 사용한 방법
#2 마우스아웃, 마우스 벗어났을때
.mouseleave()
// mouseout() 메소드를 사용한 방법
.on('mouseleave', function();)
// mouseleave 이벤트를 사용한 방법
두 가지 모두 동일한 결과를 가져옵니다. 그럼 아래 예제를 보세요.
<html>
<head>
<style type="text/css">
width: 160px;
height: 90px;
background: #dcdcdc;
text-align:center;
</style>
</head>
<body>
<div id="test">Place your mouse on here.</div>
</body>
<script type="text/javascript">
$("#test").mouseover(function(){$(this).css("color", "red");}
$("#test").mouseleave(function(){$(this).css("color", "black");}
</script>
</html>
아래 레이어에 마우스를 올리거나 벗어나게 되는 경우 해당하는 이벤트가 발생하게 됩니다.
#1 마우스오버(마우스엔터), 마우스 올렸을때
.mouseenter()
// mouseover() 메소드를 사용한 방법
.on('mouseenter', function();)
// mouseover 이벤트를 사용한 방법
#2 마우스아웃, 마우스 벗어났을때
.mouseleave()
// mouseout() 메소드를 사용한 방법
.on('mouseleave', function();)
// mouseleave 이벤트를 사용한 방법
두 가지 모두 동일한 결과를 가져옵니다. 그럼 아래 예제를 보세요.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>
아래 레이어에 마우스를 올리거나 벗어나게 되는 경우 해당하는 이벤트가 발생하게 됩니다.
Place your mouse on here.
아래의 글도 찾고 계시지 않나요?